
page {
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.header {
  padding-right: 20rpx;
  display: flex;
  justify-content:space-between;
  background-repeat: no-repeat;
  background-image: url(@/static/images/center_bg.png);
  background-size: 100%;
  line-height: 90rpx;
  color: #2F2C23;
  .tabs{
    margin-top: 60rpx;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    flex:1;
    justify-content: center;
    font-size:medium;
    color:#2F2C23;
    .text {
      margin: 0 25rpx;
      position: relative;
    }
    .active {
      &::after {
        content: '';
        width: 40rpx;
        height: 4rpx;
        transform: translate(-50%);
        background-color: black;
        position: absolute;
        left: 50%;
        bottom: 24rpx;
      }
    }
  }
  .cancel{
    margin-top: 60rpx;
    font-size: 30rpx;
    color:#2F2C23;
  }
}
.category {
  flex:1;
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 20rpx 20rpx 20rpx;
  .navigator {
    width: 150rpx;
    height: 170rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx;
    margin: 10rpx 10rpx;
    border-radius: 10rpx;

  }
  .circle {
    width: 80rpx;
    height: 80rpx;
    border-radius:50%;
    background-color: #e4e4e4;
    text-align: center;
    line-height: 80rpx;
  }
  .circleActive {
    background-color: #fdc3bc;
  }

  .name{
    margin-top: 10rpx;
    font-size: small;
  }
}
//转账
.zhuanzhang{
  margin-top: 50rpx;
  line-height: 100rpx;
 display:flex;
 flex-direction: column;
 align-items: center;
 .out,.in{
  display: flex;
  background-color: #fdc3bc;
  border-radius: 50rpx;
  padding: 10rpx;
 }
}
.bottomBar1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover; /* 或其他你需要的背景大小 */
  z-index: -1 /* 确保伪元素在内容之下 */
}
//底部
.bottomBar{
  color:black;
  position: relative;
  height:700rpx;
  width: 100%;
  .selecttag{
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    .isnotyusuan{
      height: 80rpx;
      margin: 0 10rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: small;
    }
    .tagadd {
      vertical-align:middle;
      height: 50rpx;
      width:150rpx;
      margin: 12rpx 10rpx 0 10rpx;
      text-align: center;
      line-height: 50rpx;
      border-radius: 30rpx;
      font-size: small;
      background-color: #fdc3bc;
    }

  }
  .resultGroup{
    display: flex;
    position: relative;
    justify-content:space-between;
    .back{
      margin: 5rpx;
      padding: 0 5rpx 0 10rpx;
      height: 70rpx;
      line-height: 80rpx;
     vertical-align: middle;
    }
    .remark{
      display: flex;
      flex:1;
      margin: 5rpx;
      padding: 0 30rpx;
      height: 70rpx;
      line-height: 70rpx;
      background-color: #f5f8f8;
      border-radius: 10rpx;
      .uni-input{
        flex:1;
        height: 70rpx;
        line-height: 70rpx;
        vertical-align: middle;
      }
    }

  }
  .result{
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 30rpx;
    display:block;
    z-index: 999;
    font-size:xx-large;
    text-align: right;
  }
  .account{
    height: 80rpx;
    margin: 0 10rpx;
    padding: 10rpx 20rpx;
    text-align: center;
    line-height: 80rpx;
    border-radius: 60rpx;
    font-size: small;
    background-color: #fdc3bc;
  }
  .account:active{
    color: #686767
  }
  .row{
    height: 110rpx;
    display: flex;
    .col{
      line-height: 110rpx;
      flex:1;
      text-align: center;
      border: 1px #e1e1e1 solid;
      transition-duration: 0.4s;
      .text{
        font-size:large;
      }
      .complete{
        width: 100%;
        height: 100%;
        display: block;
        background-color: #fdc3bc;
      }
      .complete:active{
        background-color:#686767;
      }
    }
    .col:active{
      background-color:#686767;
    }
  }
}
.bold{
  font-weight: bold;
}
.left{
  position: absolute;
  margin-left: 20rpx;
  margin-top: 60rpx;
  font-size: large;
}
